<template>
	<view>
		<view class="skillbox_item z-padding-24 z-radius-20 z-margin-b-16" @click="skillTap">
			<image :src="cdn(info.image)" class="skillbox_item_img z-radius-20 z-margin-r-16" mode="aspectFill" lazy-load lazy-load-margin="0" />
			<view class="skillinfo">
				<view class="z-font-30 z-font-w">
					{{ info.name }}
				</view>
				<view v-if="info.is_rest == 1" class="rest z-font-22">
					<image src="/static/index/rest.png" class="status-icon"></image>
					<view class="status text_999 z-padding-t-16 z-padding-r-16">休息中</view>
				</view>
				<view v-else-if="info.skillTime" class="skillbox_item_right z-font-22">
					<image src="/static/index/duty.png" class="status-icon"></image>

					<view class="status z-padding-t-16 z-padding-r-16">最日可约：{{ info.skillTime | date('hh:MM') }}</view>
				</view>
				<view class="skill_tips z-margin-tb-16">
					<view class="skill_tips_left">
						<view v-if="info.shopname" class="shop_name z-flex z-padding-lr-8 z-radius-8">
							<image src="../static/index/shop.png" class="shop_img" mode="" />
							<view class="z-font-18 z-padding-lr-4">{{ info.shopname }}</view>
							<van-icon name="arrow" size="10" />
						</view>
						<view class="skill_tips_left_item z-flex z-padding-lr-16 z-radius-4 text_999 z-font-18" v-if="info.age">{{ info.age + '岁' }}</view>
						<view class="skill_tips_left_item z-flex z-padding-lr-16 z-radius-4 text_999 z-font-18" v-if="info.skillCate">{{ info.skillCate }}师</view>
					</view>
					<view class="skill_tips_right z-font-24 text_999">{{ tool.toFix(info.distance) }}km</view>
				</view>
				<view class="shop">
					<view class="text_999 z-font-24">
						{{ info.commentCount }}评论
						<text>{{ info.good_comment_percent * 100 }}%好评</text>
					</view>
					<view class="z-flex-1"></view>
					<view class="choose z-flex z-font-22 z-radius-30" catchtap="appoint">立即预约</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: ['info'],
	data() {
		return {};
	},

	methods: {
		appoint(e) {
			if (this.info.is_rest == 1) {
				this.util.toast('休息中，暂不可约');
				return;
			}
			this.$emit('appoint',this.info)
			// this.triggerEvent('appoint', this.data.info);
		},
		skillTap() {
			if (this.info.is_rest == 1) {
				this.util.toast('休息中，暂不可约');
				return;
			}
			this.$emit('skillTap',this.info)
			// this.triggerEvent('skillTap', this.data.info);
		}
	}
};
</script>

<style>
.skillbox_item {
	background-color: #fff;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	position: relative;
}
.rest {
	position: absolute;
	right: 0;
	top: 0;
	height: 84rpx;
	width: 142rpx;
	display: flex;
	justify-content: flex-end;
}

.skillbox_item_right {
	position: absolute;
	right: 0;
	top: 0;
	height: 84rpx;
	width: 267rpx;
	display: flex;
	justify-content: flex-end;
}

.status-icon {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
}
.status {
	z-index: 10;
	position: relative;
}
.skillbox_item_right .status {
	color: var(--maingreencolor);
}

.skillbox_item_img {
	width: 153rpx;
	height: 153rpx;
}
.skillinfo {
	display: flex;
	/* align-items: center; */
	flex-direction: column;
	width: calc(686rpx - 180rpx);
}
.skill_tips {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}
.skill_tips_left {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}
.skill_tips_left_item {
	background-color: var(--mainbg);
	height: 32rpx;
}
.skill_tips_left_item:nth-child(n + 2) {
	margin-left: 20rpx;
}
.shop_img {
	width: 25rpx;
	height: 25rpx;
}
.shop_name {
	color: #dbac54;
	height: 32rpx;
	background-color: #fcf7ee;
}
.shop {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.choose {
	width: 124rpx;
	height: 48rpx;
	background: #62cb81;
	color: #fff;
}
</style>
